<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<!-- 
		Replace path to template, title, header and body
		with actual data.
	 -->
<ui:composition template="/templates/store.xhtml">
	<ui:define name="pageTitle">Descriptif du rêve</ui:define>
	<ui:define name="pageHead"></ui:define>
	<ui:define name="first"></ui:define>
	<ui:define name="body">

		<div class="row">
			<div class="margin-top-medium">

				<div class="large-12 columns">
				
					<div class="small-2 columns">
						<img width="150" height="150" src="../img/imgtest/mrnorris.jpeg" alt="image produit" />
					</div>
					
					<div class="small-4 columns">
						<p>Chuck Norris makes you dream !</p>
						<p>666,69€</p>
						<img src="../img/imgtest/etoiles.png" alt="notation en nombre d'étoiles" />
					</div>
	
					<div class="large-offset-2 small-4 columns">
						<a href="/PresentationDream/pages/panier.jsf" class="button radius large">Ajouter au panier</a> <br />
						<a href="#">Ajouter aux favoris </a><img width="20" height="20" src="../img/imgtest/coeurfavori.png" alt="ajouter aux favoris" />
					</div>
	
				</div>
			</div>
		</div>

		<div class="row">
			<div class="margin-top-small">
					<div class="small-4 columns">
					
					
						<span class="title-style">Description :</span>
					
					<div class="margin-bottom-small descReve" style="padding:0 0 0 20px">
						<dl>
							<dt>Réalisme</dt>
							<dd>1</dd>
							
							<dt>Durée</dt>
							<dd>Indéterminée</dd>
							
							<dt>Nombre de personnes</dt>
							<dd>1</dd>
							
							<dt>Nombre de lieux</dt>
							<dd>1</dd>
							
							<dt>Type de rêve</dt>
							<dd>Chuck Norris</dd>
						</dl>
						
						<p class="content-size"> Chuck Norris style ! Je ne sais pas quoi écrire de plus pour faire suffisamment de ligne à tester pour voir le rendu</p>
						<span class="clear">&nbsp;</span>
					</div>
					
					<div class="margin-bottom-small">
						<span class="title-style">Avis :</span>
					</div>
					
						<div class="margin-bottom-small">
							<a href="#">Nom du client connecté</a> <img src="../img/imgtest/ratestar.gif" alt="notation du produit par le client"/><br/>
							<br/> 
							<em>Titre du post.</em>
							<span class="content-size">Contenu du post laissé par le client</span>
							<p>_______________________</p>
						</div>
					
						<div class="margin-bottom-small">
							<a href="#">SwagMan666</a> <img src="../img/imgtest/ratestar.gif" alt="notation du produit par le client"/><br/>
							<br/>  
							<em>Roxx du Poney !</em>
							<span class="content-size">Le légendaire Chuck Norris plus vrai que nature !! Merci DreamsHop !! Ce site est vraiment parfait!</span>
							<p>_______________________</p>
						</div>
						
						<a href="#" data-reveal-id="ajoutCommentaire" class="button radius tiny">Laisser un avis</a>
						
						
<!-- Ajout de commentaire -->
	
	
					<div id="ajoutCommentaire" class="reveal-modal" data-reveal="true">
  						
  						<div class="row">
							<div class="small-2 columns">
								<img width="150" height="150" src="../img/imgtest/mrnorris.jpeg" alt="not found" />
							</div>
					
							<div class="small-10 columns">
								<p>Chuck Norris makes you dream !</p>
								<p>666,69€</p>
								
							</div>				
  						</div>
  						<br/>
  						<div class="row">
  							<div class="small-8 columns">
  							 
      							
      							<textarea placeholder="Commentaire"></textarea>
      							
    						</div>
  							
  							
  							<div class="small-4 columns">
  								<img src="../img/imgtest/etoiles.png" alt="not found" />
  							
  							</div> 
  						  						
  						</div>
  						
  						<div class="row">
  							<div class="small-4 columns">
  								<a href="#" class="button radius tiny">Soumettre le commentaire</a>
  							</div>
  						</div>
  						  						
  						<a class="close-reveal-modal">&#215;</a>
					</div>
					
				</div>
				
				<div class="large-offset-1 large-4 medium-5 small-12 columns">
												
						<div class="row">
							<div class="small-12 medium-10 big-8 small-centered columns">
								<label>Dans la même catégorie</label>
							</div>
						</div>
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<img src="../img/reves/reve1.bmp" alt="image produit" width="100" height="100" />
						</div>
						<div class="small-9 columns">
						
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="#" class="button radius tiny">Consulter la fiche</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				<div class="row casse-medium reves-item">
					<div class="small-3 columns">
						<img src="../img/reves/reve1.bmp" alt="image produit" width="100" height="100" />
					</div>
					<div class="small-9 columns">
						<div class="row">
							<div class="small-8 columns">
								<label>Rêve tout doux</label>
							</div>
							<div class="small-4 columns"></div>
						</div>
						<div class="casse-small">
							<div class="row casse-small">
								<div class="small-7 columns">
									<label>9.99€</label>
								</div>
								<div class="small-5 columns">
									<a href="#" class="button radius tiny">Consulter la fiche</a>
								</div>
							</div>
						</div>
					</div>
				</div>
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<img src="../img/reves/reve1.bmp" alt="image produit" width="100" height="100" />
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="#" class="button radius tiny">Consulter la fiche</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<img src="../img/reves/reve1.bmp" alt="image produit" width="100" height="100" />
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="#" class="button radius tiny">Consulter la fiche</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>		
	</ui:define>
	<ui:define name="last"></ui:define>
</ui:composition>

</html>